<div class="view-image">
    <div class="modal-header">
        {{ file.FileName || '图片预览' }}
        <i class="yb-icon ico-close" ng-click="cancel()"></i>
    </div>
    <div class="modal-body">
        <img ng-if="!isRawUrl" ng-src="{{file.FileUrl | ImgUrl}}" id="transformImg" draggable="true">
        <img ng-if="isRawUrl" ng-src="{{file.FileUrl}}" id="transformImg" draggable="true">
    </div>
    <div class="modal-footer">
        <span class="iconfont pmsico-grow rotate-icon m-r" title="放大" ng-click="handleScale(0.2)"></span>
        <span class="iconfont pmsico-shrink rotate-icon m-r" title="缩小" ng-click="handleScale(-0.2)"></span>
        <span class="iconfont pmsico-origin-size rotate-icon" title="图片原始大小" ng-click="handleScale(1,true)"></span>
        <span class="divider vertical"></span>
        <span class="iconfont pmsico-rotate-left rotate-icon m-r" title="左旋转90°" ng-click="handleRotate(-90)"></span>
        <span class="iconfont pmsico-rotate-right rotate-icon" title="右旋转90°" ng-click="handleRotate(90)"></span>
    </div>
</div>
<style>
    .view-image .modal-body {
        display: flex;
        justify-content: center;
        height: 580px!important;
        overflow: hidden;
        position: relative;
    }

    .view-image .modal-body img {
        height: 100%;
        position: absolute;
        cursor: move;
    }

    .view-image .modal-footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .view-image .rotate-icon {
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }
</style>